<template>
  <el-card class="box-card">
    <div class="header">
      <!-- 搜索学科 -->
      <el-form :inline="true" label-width="80px">
        <el-form-item label="学科名称">
          <el-input size="mini" v-model="q.subjectName"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" @click="empty">清除</el-button>
          <el-button size="mini" type="primary" @click="search(q)">搜索</el-button>
        </el-form-item>
      </el-form>
      <!-- 新增学科按钮 -->
      <div class="addsci">
        <el-button size="mini" type="success" @click="addSub"><i class="el-icon-edit"></i>新增学科</el-button>
      </div>
    </div>
    <!-- 数据条数 -->
    <el-tag size="medium " type="info" style="width: 100%"><i class="el-icon-info"></i>数据一共{{ total }}条</el-tag>
    <!-- 表格 -->
    <el-table :data="listSub" style="width: 100%; margin-top: 15px">
      <el-table-column label="序号" type="index"> </el-table-column>
      <el-table-column label="学科名称" prop="subjectName"> </el-table-column>
      <el-table-column label="创作者" prop="username"> </el-table-column>
      <el-table-column label="创建日期" min-width="120px">
        <template v-slot="{ row }">{{ row.addDate | dateFormat }}</template>
      </el-table-column>
      <el-table-column label="前台能否显示" prop="isFrontDisplay">
        <template v-slot="{ row }">
          {{ row.isFrontDisplay | conFront }}
        </template>
      </el-table-column>
      <el-table-column label="二级目录" prop="twoLevelDirectory"> </el-table-column>
      <el-table-column label="标签" prop="tags"> </el-table-column>
      <el-table-column label="题目数量" prop="totals"> </el-table-column>
      <el-table-column label="操作" min-width="150px">
        <template v-slot="{ row }">
          <div class="center-item">
            <el-link type="primary" :underline="false" @click="clickDir(row)">学科分类</el-link>
            <el-link type="primary" :underline="false" @click="clickTags(row)">学科标签</el-link>
            <el-link type="primary" :underline="false" @click="updateSub(row)">修改</el-link>
            <el-link type="primary" :underline="false" @click="delSub(row)">删除</el-link>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      style="text-align: right; margin-top: 10px"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="q.page"
      :page-sizes="[5, 10, 20, 50]"
      :page-size="q.pagesize"
      layout="prev, pager, next,sizes, jumper"
      :total="total"
      background
    >
    </el-pagination>
    <!-- 增加学科 -->
    <AddSubject :showDialog.sync="showAdd" @reload="initSubject" />
    <!-- 修改学科 -->
    <UpdateSub :showDialog.sync="showUpdate" :data.sync="data" @reload="initSubject" />
  </el-card>
</template>

<script>
// 导入子组件
import AddSubject from './companys/addSubject.vue'
import UpdateSub from './companys/updateSub.vue'

// 按需导入接口
import { list, simple, remove } from '@/api/hmmm/subjects.js'
export default {
  name: 'SubJect',
  components: {
    AddSubject,
    UpdateSub
  },
  data() {
    return {
      // 查询参数对象
      q: {
        page: 1,
        pagesize: 10,
        subjectName: ''
      },
      // 页数
      // 学科列表
      listSub: [],
      // 总条数
      total: 0,
      // 增加对话框展示
      showAdd: false,
      // 修改对话框展示
      showUpdate: false,
      // 要修改行的data
      data: {},
      // 学科分类
      id: '',
      name: ''
    }
  },
  created() {
    // 学科列表
    this.initSubject()
  },
  methods: {
    // 获取学科列表
    async initSubject() {
      const result = await list(this.q)
      // console.log(result)
      // 全部数据
      this.listSub = result.data.items
      // 数据总条数
      this.total = result.data.counts
    },
    // 页容量发生变化时
    handleSizeChange(newSize) {
      this.q.pagesize = newSize
      this.initSubject()
    },
    // 页码值发生变化
    handleCurrentChange(newPage) {
      this.q.page = newPage
      this.initSubject()
    },
    // 清空按钮
    empty() {
      this.q.subjectName = ''
    },
    // 搜索按钮
    async search(obj) {
      await list(obj)
      this.initSubject()
    },
    // 学科分类
    async clickDir(obj) {
      const res = await simple()
      res.data.forEach(item => {
        if (item.value !== obj.id || item.label !== obj.subjectName) return
        this.id = item.value
        this.name = item.label
        this.$router.push({
          path: 'directorys/',
          query: {
            id: this.id,
            name: this.name
          }
        })
      })
    },
    // 标签分类
    async clickTags(obj) {
      const res = await simple()
      res.data.forEach(item => {
        if (item.value !== obj.id || item.label !== obj.subjectName) return
        this.id = item.value
        this.name = item.label
        this.$router.push({
          path: 'tags/',
          query: {
            name: this.name,
            id: this.id
          }
        })
      })
    },
    // 新增学科
    addSub() {
      this.showAdd = true
    },
    // 修改学科
    updateSub(obj) {
      this.data = obj
      this.showUpdate = true
    },
    // 删除学科
    async delSub(obj) {
      const result = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (result !== 'confirm') return
      await remove(obj)
      this.$message.success('删除成功')
      this.initSubject()
    }
  }
}
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  justify-content: space-between;
}
.el-icon-info {
  margin-right: 5px;
}
.el-icon-edit {
  margin-right: 5px;
}
</style>
